<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.min.js"></script>
    <title>02-v-bind动态绑定class(对象语法)</title>
    <style>
        .active2{
            color:red;
        }
        .line2{
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 加上单引号当成字符串 -->
    <h2 :class="['active','line']">{{message}}</h2>
    <h2 :class="[active,line]">{{message}}</h2>
    <h2 :class="getClasses()">{{message}}</h2>
</div>
</body>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            message:"你好啊",
            active:"active2",
            line:"line2"
        },
        methods: {
            getClasses(){
                return [this.active,this.line]
            }
        },
    })

</script>
</html>